<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="app"></div>
    <div class="app2"></div>
  </body>
  <script>
    var app = document.querySelector('.app')
    var app2 = document.querySelector('.app2')

    function getNetworkType() {
      var ua = navigator.userAgent
      var networkStr = ua.match(/NetType\/\w+/)
        ? ua.match(/NetType\/\w+/)[0]
        : 'NetType/other'
      networkStr = networkStr.toLowerCase().replace('nettype/', '')
      // var networkType
      // var connection =
      //   navigator.connection ||
      //   navigator.mozConnection ||
      //   navigator.webkitConnection
      // var type = connection.type
      // debugger
      switch (networkStr) {
        case 'wifi':
          networkType = 'wifi'
          break
        case '4g':
          networkType = '4g'
          break
        case '3g':
          networkType = '3g'
          break
        case '3gnet':
          networkType = '3g'
          break
        case '2g':
          networkType = '2g'
          break
        default:
          networkType = 'other'
      }
      return networkType
    }

    app.textContent = getNetworkType()

    var networkType
    var connection =
      navigator.connection ||
      navigator.mozConnection ||
      navigator.webkitConnection
    // var type = connection.type
    // alert(type)
    app2.textContent = 'T:' + JSON.stringify(connection)
  </script>
</html>
